import React, { useEffect, useState } from 'react';
import { Table,  Space, Button , Image , Popconfirm , message } from 'antd';
import {useHistory} from "react-router-dom"
import {getBannerList , deleteBanner} from "../../api/banner"



  const Com = () => {
  
  const [y,setY] = useState(0)
  const [bannerList , setBannerList] = useState([])
  const [selectedRowKeys , setSelectedRowKeys] = useState([])

 
  const columns = [
    {
      title: '序号',
      align:'center',
      render: (text, record, index) => { return <span>  {index + 1} </span>}
        // text ---- img
        // record --- 整条数据对象
        // index --- 索引值 ---- bannerList中的当前对象的索引值
    },
    {
      title: '图片',
      align:'center',
      dataIndex: 'img',
      render:(text , record , index) => { return <Image src={text} style = {{ height: 90 }}/>}
    },
    {
      title: '链接地址',
      align:'center',
      dataIndex: 'link'
    },
    {
      title: '提示信息',
      align:'center',
      dataIndex: 'alt'
  
    },
    {
      title: '操作',
      align:'center',
      render: (text, record , index) => (
        <Space size="middle">
          <Popconfirm
            title='确定要删除吗？'
            placement="topRight"
            onConfirm={ () => { confirm(record.bannerid) } }
            onCancel={ () => {} }
            okText="Yes"
            cancelText="No"
          >
            <Button danger> 删除 </Button>
          </Popconfirm>
         
        </Space>
      ),
    },
  ];


  const getbanner = () => {
    getBannerList().then(res => {
      setBannerList(res.data.data)
      // console.log(res);
    })
  }
  useEffect(() => {
    setY(window.innerHeight)
    getbanner()
    
  } , [])
  const confirm = (val) => {
    console.log(val);
    deleteBanner({bannerid:val}).then(res => {
      getbanner()
      // console.log(res);
    })
    message.success('删除成功');
  }
  const history = useHistory()
  
  const goAdd = () => {
    history.push('/banner/add')
  }
  const removeMore = () =>{
    const arr = []

    selectedRowKeys.forEach(item =>[
      arr.push(deleteBanner({bannerid:item}))
    ])
    // console.log(arr);
    Promise.all(arr).then(() =>{
      getBannerList().then(res => setBannerList(res.data.data))
    })
  }
  // 多选框事件
  const onSelectChange =(selectedRowKeys) =>{
    console.log(selectedRowKeys);
     setSelectedRowKeys(selectedRowKeys)
  }
  // 多选框事件
  const rowSelection = {
   selectedRowKeys,  //把自定义的选框挂载到 事件上
   onChange: onSelectChange // 挂载多选框的change事件
 }




  return (
    <div>
      <Space direction="vertical" style={{ width: '100%'}} >
        <Space>
          <Button type="primary" onClick={goAdd} >添加轮播图</Button>
          {
          selectedRowKeys.length > 0 &&  <Button danger type='dashed' onClick={removeMore}>批量删除</Button> 
          }


        </Space>
        
        <Table rowSelection={rowSelection} dataSource = { bannerList } columns = { columns } rowKey={(record) => record.bannerid}  pagination = {{
            position: [ 'bottomCenter' ],
          }}
          scroll={{x:0 ,  y:y-320}}
          />
      </Space>
    </div>
  );

}

export default Com